import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from 'layout/App.js'
import './index.less';
import './reportstart.less'
import jdiwork from '../../utils/jdiwork'
import {
    Breadcrumb,
    Radio,
    Table,
    Icon,
    Select,
    Notification,
    Row,
    Col,
    Button,
    Label,
    FormControl,
    Modal
} from 'tinper-bee';
import {
    getSearchProjectActivityData,
    getAllbillTypeTotal,
    getProjectActivityData,
    getPlanData,
    getProblemReason,
    getSupplierProblem,
    getPkOrgList,
    handleGetReportData,
    getOrgRoleList
} from './dataanalysis.config'
import {
    vendorsSetUrl,
    vendorsGetUrlParam,
    vendorsDanger as danger,
    vendorsSuccess as success,
    vendorsFmtDate as fmtDate,
    vendorsTrimStr as trimStr,
    vendorsGetTenantId,
    vendorsSetStorage,
} from 'utils/config.js';
import './index.css';
import RangePicker from '../../components/RangePicker/index.jsx'

import Tooltip from 'bee-tooltip';
import 'bee-tooltip/build/Tooltip.css';
const textOverflowIndex = 10; // 控制项目名称在多少个字符后隐藏

var echarts = require('echarts');

let problemreasonChart;
let supplierChart;
let color = ['#5E9ED8', '#7ADA51', '#F5AB25', '#E44B31', '#59B7C0', '#CA53F1'];
let init = 0;

const notification = Notification.newInstance({ position: 'bottomRight' });

function getScrollWidth() {
    var noScroll, scroll, oDiv = document.createElement("DIV");
    oDiv.style.cssText = "position:absolute;top:-1000px;width:100px;height:100px; overflow:hidden;";
    noScroll = document.body.appendChild(oDiv).clientWidth;
    oDiv.style.overflowY = "scroll";
    scroll = oDiv.clientWidth;
    document.body.removeChild(oDiv);
    return noScroll - scroll;
}

const scrollWidth = getScrollWidth();
let tenantId;
let cookieStr = document.cookie.split(';').find(cur => cur.indexOf('tenantid=') != -1);
if (cookieStr) {
    tenantId = cookieStr.split('=')[1];
}
// let tenantId = "x61tnmfx";
export default class DataAnalysis extends Component {
    constructor(props) {
        super(props);
        let _self = this;
        this.state = {
            codesortno: 2,
            progresssortno: 0,
            filterCode: 'ongoing',
            problemFilterCode: 'halfYear',
            issuesNoAll: 0,
            plandata: [],
            problemreasondata: [],
            supplierdata: [],
            problemnodata: true,
            suppliernodata: true,
            supplierproblemnumbers: 0,
            supplieroverduenumbers: 0,
            projectName: "",
            pkOrg: '',
            orgName: '',
            urlParam: '',
            showBreadFlag: false,
            showBreadcrumb: 2,
            initEcharsData: 1,
            billCount: 0,
            picCount: 0,
            orgList: [],
            startTime: '',
            endTime: '',
            selectValue: '',
            selectDisabled: false,
            projectsData: [],
            constructBillTotal: 0,
            supervisorBillTotal: 0,
            ownEntBillTotal: 0,
            constructData: [],
            supervisorCountData: [],
            ownEntCountData: [],
            option: {
                title: {
                    show: false,
                    text: '项目名称: ',
                    textStyle: {
                        color: '#5D5D5D',
                        fontSize: 14,
                        fontWeight: 'normal'
                    },
                    subtext: '项目经理: ',
                    subtextStyle: {
                        color: '#5D5D5D',
                        fontSize: 14,
                        fontWeight: 'normal'
                    },
                    left: 40,
                    top: 30,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    }
                },
                color: ['#5793f3', '#d14a61'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    height: 284,
                    bottom: 60,
                    left: 55
                },
                legend: {
                    data: ['单据', '图片'],
                    left: 600,
                    top: 30
                },
                xAxis: {
                    // name:'单据类型',
                    // nameLocation:'center',
                    // nameGap:30,
                    // minInterval:{
                    //     minInterval: 1
                    // },
                    data: [
                        '平行检验',
                        '旁站记录',
                        '巡查记录',
                        '施工记录',
                        '工序报验',
                        '问题记录',
                        '工序拍照',
                        '施工日志',
                        '综合验收',
                        '变更申请',
                        '签证申请',
                        '工作联系',
                        '开工报告',
                        '安全整改',
                        '停工单',
                        '复工单',
                        '阶段验收'
                    ],
                    axisTick: {
                        length: 1,
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#BBB',
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        color: '#BBB',
                    }
                }
                ,
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 10000,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#BBB',
                            marginRight: '20px'
                        }
                    },
                    axisLabel: {
                        color: '#BBB',
                    }
                }
                ,
                series: [
                    {
                        name: '单据',
                        type: 'bar',
                        // barGap:'80%',
                        barCategoryGap: '35%',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#53B6FB"
                                }, {
                                    offset: 1,
                                    color: "#3D38EE"
                                }], false)
                            }
                        }
                    },
                    {
                        name: '图片',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#6EFFC0"
                                }, {
                                    offset: 1,
                                    color: "#2ACA96"
                                }], false)
                            }
                        }
                    }
                ]
            },
            projectColumns: [
                {
                    title: "项目名称", dataIndex: "projectName", key: "projectName", width: '40%', render(text, rec, index) {
                        let displayText = text.length > textOverflowIndex ? text.substr(0, textOverflowIndex) + "..." : text;
                        return (
                            <Tooltip
                                className={[text.length > textOverflowIndex ? "show" : "hidden"]}
                                inverse
                                placement="top"
                                overlay={text}>
                                <div>{displayText}</div>
                            </Tooltip>
                        )
                    }
                },
                { title: "项目经理", dataIndex: "projectManagerName", key: "projectManagerName", width: '20%' },
                { title: "单据数量", dataIndex: "count", key: "count", width: '20%' },
                { title: "图片数量", dataIndex: "picCount", key: "picCount", width: '20%' },
            ],
            columnsTable: [
                {
                    title: "单位名称", dataIndex: "activityName", key: "activityName", width: '70%',
                    render(text, record, index) {
                        return (
                            <span style={{ color: "#2C7EDC", cursor: "pointer" }} onClick={() => {
                                _self.handleProjectClick(record)
                            }}>{text}</span>
                        )
                    }
                },
                { title: "单据数量", dataIndex: "billCount", key: "billCount", width: '30%' }
            ]
        };
    }


    componentDidMount = () => {
        let _me = this;
        problemreasonChart = echarts.init(document.getElementById('issueAnalysis'));
        supplierChart = echarts.init(document.getElementById('suppliernos'));

        let elesuppliertable = document.getElementById('suppliertable');
        elesuppliertable.onscroll = function () {
            let temp = Math.round(elesuppliertable.scrollTop / 40);
            // elesuppliertable.scrollTop=temp*40;
            if (temp != init) {
                supplierChart.dispatchAction({
                    type: 'dataZoom',
                    dataZoomIndex: 0,
                    startValue: temp,
                    endValue: temp + 4
                });
                init = temp;
            }
        };

        // elesuppliertable.onmousewheel = function () {
        //     console.log(arguments);
        // }

        // reportstart.js
        //获取初始化组织列表 根据组织选中的组织带出数据
        // this.initEchars()
        if (tenantId) {
            this.onInitDataAnalysis()
        } else {
            jdiwork().getContext((data) => {
                tenantId = data.tenantid;
                this.onInitDataAnalysis()
            });
        }
    };
    handleProjectClick = (rec) => {
        let { startTime, endTime, pkOrg, orgName } = this.state;
        startTime = Date.parse(startTime);
        endTime = Date.parse(endTime);
        let params = {
            start_time: startTime,
            end_time: endTime,
            pk_org: pkOrg,
            orgName,
            ent_id: rec.pkActivity,
            activityName: rec.activityName,
            billCount: rec.billCount,
            showBreadcrumb: this.state.showBreadcrumb
        };
        sessionStorage.setItem('fromGroupData', JSON.stringify(params));
        window.location.href = '/billdetailreport.html'
    };
    getInitData = (selectValue) => {
        this.setState({
            pkOrg: selectValue,
            selectValue
        }, () => {
            this.handleAutoTimeValue([
                this.handleGetOrgRoleList,
                this.handleGetProjectActivityData,
                this.showProblemReason,
                this.showPlanData,
                this.showSupplierProblem,
            ]);
        })
    };
    getFromGroupInitData = (fromGroupData) => {
        this.setState({
            orgList: this.state.showBreadcrumb == 2 ? fromGroupData['orgList'] : [{ pkSrc: fromGroupData["pk_org"], sname: fromGroupData["orgName"] }],
            pkOrg: fromGroupData["pk_org"],
            selectValue: fromGroupData["pk_org"]
        }, () => {
            this.handleGetOrgRoleList();
            this.handleGetProjectActivityData();
            this.showProblemReason();
            this.showPlanData();
            this.showSupplierProblem();
        });
    };
    setChildren = (children, childrenArr) => {
        if (children && children.length) {
            children.forEach((item) => {
                if (item.pkSrc) {
                    childrenArr.push(item);
                    if (item["children"]) {
                        this.setChildren(item["children"], childrenArr)
                    }
                }
            })
        }
    };
    handleGetPkOrgList = (callback, fromGroupData) => {
        getPkOrgList().then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                let { children } = data.result;
                children = children ? children : [];
                let selectValue = '';
                let childrenArr = [];
                this.setChildren(children, childrenArr);
                selectValue = childrenArr.length > 0 ? childrenArr[0].pkSrc : '';
                this.setState({
                    orgList: childrenArr
                }, () => {
                    if (selectValue) {
                        callback && callback(selectValue, fromGroupData);
                    } else {
                        danger({ 'text': "你没有组织权限,不能查看企业看板" })
                    }
                })
            } else {
                danger({ 'text': data.exMsg })
            }
        })
    };
    setFromGroupQueryData = ({ fromGroupData }) => {
        let startTime = fmtDate(Number(fromGroupData['start_time']));
        let endTime = fmtDate(Number(fromGroupData['end_time']));
        this.setState({
            startTime,
            endTime,
            orgName: fromGroupData['orgName'],
            urlParam: fromGroupData,
            showBreadFlag: true,
            selectDisabled: fromGroupData['showBreadcrumb'] && fromGroupData['showBreadcrumb'] == 3 ? true : false,
            showBreadcrumb: fromGroupData['showBreadcrumb'],
        }, () => {
            this.getFromGroupInitData(fromGroupData)
        })
    };
    handleGetProjectActivityData = () => {
        let { startTime, endTime, pkOrg } = this.state;
        startTime = Date.parse(startTime);
        endTime = Date.parse(endTime);
        let param = { start: startTime, end: endTime, tenantId, limit: 1000, orgId: pkOrg };
        getProjectActivityData(param).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                let { billCount, picCount, projects } = data.result;
                projects = projects && projects.length ? projects : [];
                if (projects && projects.length) {
                    this.onRowEcharsClick(projects[0]);
                } else {
                    projects = [];
                    this.setState({
                        projectName: '',
                        projectManagerName: '',
                    }, () => {
                        this.initEchars(projects);
                    })
                }
                this.setState({
                    billCount,
                    picCount,
                    projectsData: projects,
                })
            } else {
                danger({ 'text': data.exMsg })
            }
        })
    };
    getBillTypeTotal = (data) => {
        let total = 0;
        data.forEach((item) => {
            total += item.billCount
        })
        return total
    }
    handleGetOrgRoleList = () => {
        let { startTime, endTime, pkOrg } = this.state;
        startTime = Date.parse(startTime);
        endTime = Date.parse(endTime);
        let param = {
            start: startTime,
            end: endTime,
            orgId: pkOrg,
            tenantId
        };
        getOrgRoleList(param).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                let { constructCountList, ownEntCountList, supervisorCountList } = data.result;
                constructCountList = constructCountList && constructCountList.length ? constructCountList : [];
                ownEntCountList = ownEntCountList && ownEntCountList.length ? ownEntCountList : [];
                supervisorCountList = supervisorCountList && supervisorCountList.length ? supervisorCountList : [];
                let constructBillTotal = this.getBillTypeTotal(constructCountList);
                let supervisorBillTotal = this.getBillTypeTotal(supervisorCountList);
                let ownEntBillTotal = this.getBillTypeTotal(ownEntCountList);
                this.setState({
                    constructBillTotal,
                    supervisorBillTotal,
                    ownEntBillTotal,
                    constructData: constructCountList,
                    supervisorCountData: supervisorCountList,
                    ownEntCountData: ownEntCountList
                })
            } else {
                danger({ 'text': data.exMsg })
            }
        })
    };
    showPlanData = () => {
        let _me = this;

        let sortField = 'iskey,';
        let sortWay = 'desc,';
        if (this.state.codesortno == 1) {
            sortField += 'scode';
            sortWay += 'asc';
        } else if (this.state.codesortno == 2) {
            sortField += 'scode';
            sortWay += 'desc';
        }

        if (this.state.progresssortno == 1) {
            sortField += 'progress';
            sortWay += 'asc';
        } else if (this.state.progresssortno == 2) {
            sortField += 'progress';
            sortWay += 'desc';
        }
        if (!this.state.pkOrg) {
            return
        }
        getPlanData({
            'isAjax': 1,
            ieStamp: new Date().getTime(),
            tenantId: tenantId,
            filterCode: this.state.filterCode,
            orgId: this.state.pkOrg,
            sortField,
            sortWay
        }).then(function (response) {
            if (response.data.resultCode != 'busi_ex') {
                let data = response.data.result;

                if (data.length <= 10) {
                    document.getElementsByClassName('u-table-header')[0].style.paddingRight = 0 + 'px';
                } else {
                    document.getElementsByClassName('u-table-header')[0].style.paddingRight = scrollWidth + 'px';
                }

                data.forEach(cur => {
                    cur.planStartDate = fmtDate(cur.planStartDate);
                    cur.planEndDate = fmtDate(cur.planEndDate);
                    cur.progress = cur.progress + '%';
                    cur.onTimeCompletionRate = cur.onTimeCompletionRate + '%';
                    cur.key = cur.pkProject;
                });

                _me.setState({
                    plandata: data
                })

            } else {
                danger({ 'text': response.data.exMsg });
            }
        })
    };
    showProblemReason = () => {
        let _me = this;
        if (!this.state.pkOrg) {
            return
        }
        getProblemReason({
            'isAjax': 1,
            ieStamp: new Date().getTime(),
            orgId: this.state.pkOrg,
            tenantId: tenantId,
            filterCode: this.state.problemFilterCode
        }).then(function (response) {
            if (response.data.resultCode != 'busi_ex') {
                let data = response.data.result;
                // data = [];
                if (!data || data.length <= 0) {
                    _me.setState({
                        problemnodata: true
                    })
                    return;
                } else {
                    _me.setState({
                        problemnodata: false
                    })
                }
                let sum = 0;
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    item.name = item.problemName;
                    item.value = item.count;
                    if (i < data.length - 1) {
                        let per = parseInt((item.count * 100 / item.totalCount).toFixed(0));
                        sum += per;
                        item.percent = per + '%';

                    } else {
                        item.percent = Math.max(0, 100 - sum) + '%';
                    }
                }
                data = data.filter(cur => cur.percent != '0%');

                let option = {
                    tooltip: {
                        trigger: 'item',
                        // formatter: "{b}: {c} ({d}%)",
                        formatter: (params) => {
                            // console.log(params);
                            let data = params.data;
                            return `${data.name}: ${data.count} (${data.percent})`;
                        },
                        position: 'right'
                    },
                    color: color,
                    series: [
                        {
                            name: '问题原因',
                            type: 'pie',
                            radius: ['35%', '60%'],
                            center: [150, 160],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                    formatter: (params) => {
                                        let name = params.name;
                                        return name.replace(/(.{6})/g, function (r, $1) {
                                            return $1 + '\n';
                                        })
                                    }

                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '14',
                                        fontWeight: 'bold'
                                    }

                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }
                    ]
                };

                problemreasonChart.setOption(option);

                problemreasonChart.on('click', function (params) {
                    let problemName = params.data.problemName;
                    // _me.getProblemReasonData(problemName,_me);
                });

                if (data.length > 0) {
                    _me.setState({
                        issuesNoAll: data[0].totalCount,
                        problemreasondata: data,
                    })
                }


            } else {
                danger({ 'text': response.data.exMsg });
            }
        })
    };

    showSupplierProblem = () => {
        let _me = this;
        if (!this.state.pkOrg) {
            return
        }
        getSupplierProblem({
            orgId: this.state.pkOrg,
            'isAjax': 1,
            ieStamp: new Date().getTime(),
            tenantId: tenantId
        }).then(function (response) {
            if (response.data.resultCode != 'busi_ex') {
                let data = response.data.result;
                data = data.slice(0, 5);
                // data = [];
                if (data.length <= 0) {
                    _me.setState({
                        suppliernodata: true
                    })
                    return;
                } else {
                    _me.setState({
                        suppliernodata: false
                    })
                }
                let datatotal = [];
                let dataoverdue = [];
                let dataAxis = [];

                let allc = 0;
                let overduec = 0;
                data.forEach((cur, index) => {
                    datatotal.push(cur.totalCount - cur.overdueCount);
                    dataoverdue.push(cur.overdueCount);
                    // dataAxis.push(cur.enterpriseName.split('').join('\n'));
                    dataAxis.push(`0${index + 1}`);
                    // dataAxis.push('');
                    allc += cur.totalCount;
                    overduec += cur.overdueCount
                });
                let supplierChartOption = {
                    grid: {
                        top: 40,
                        bottom: 86,
                        left: 40,
                    },
                    legend: {
                        data: [
                            {
                                name: '未超期',
                                icon: 'rect',
                                textStyle: {
                                    color: '#5d5d5d',
                                    fontFamily: 'MicrosoftYaHei',
                                    fontSize: 12
                                }
                            },
                            {
                                name: '超期',
                                icon: 'rect',
                                textStyle: {
                                    color: '#5d5d5d',
                                    fontFamily: 'MicrosoftYaHei',
                                    fontSize: 12
                                }
                            }
                        ],
                        align: 'left',
                        left: 20,
                        itemWidth: 12,
                        itemHeight: 12,
                        selectedMode: false,

                    },
                    color: ['#4878F5', '#2CCB97'],
                    xAxis: {
                        type: 'category',
                        data: dataAxis,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: '#999'
                            },
                            // rotate:90,
                        },
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10,
                        rich: {},

                    },
                    yAxis: {
                        // name: '(个)',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        },
                        minInterval: 1
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            startValue: 0,
                            endValue: 4,
                            minValueSpan: 4,
                            maxValueSpan: 4,
                            zoomLock: true,
                            show: false,
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            data: datatotal,
                            stack: 'a',
                            name: '未超期',
                            emphasis: {
                                itemStyle: {
                                    // opacity: 0.7,
                                    color: '#4878F5'
                                }
                            }
                        },
                        {
                            type: 'bar',
                            data: dataoverdue,
                            animation: false,
                            stack: 'a',
                            name: '超期',
                            barWidth: 16,
                            barCategoryGap: 50,
                            emphasis: {
                                itemStyle: {
                                    // opacity: 0.7,
                                    color: '#2CCB97'
                                }
                            }
                        },
                    ],
                };

                supplierChart.setOption(supplierChartOption);
                supplierChart.on('click', function (params) {
                    let seriesName = params.seriesName;
                    if (seriesName == '未超期') {
                        seriesName = '0'
                    } else if (seriesName == '超期') {
                        seriesName = '1'
                    }
                    let { enterpriseName, pkEnterprise } = _me.getEnterpriseName(_me.state.supplierdata, params.name);
                    _me.getSupplierData(enterpriseName, pkEnterprise, seriesName)
                });
                _me.setState({
                    supplierdata: data,
                    supplieroverduenumbers: overduec,
                    supplierproblemnumbers: allc,
                })

            } else {
                danger({ 'text': response.data.exMsg });
            }
        })
    };

    handleRadio1Change = (value) => {
        this.state.filterCode = value;
        if (!this.state.pkOrg) {
            return
        }
        this.showPlanData();
    }

    sortByCode = () => {
        this.state.progresssortno = 0;
        if (this.state.codesortno == 0) {
            this.state.codesortno = 2;
        } else if (this.state.codesortno == 1) {
            this.state.codesortno = 2;
        } else if (this.state.codesortno == 2) {
            this.state.codesortno = 1;

        }
        this.forceUpdate();
        this.showPlanData();
    }

    sortByProgress = () => {
        this.state.codesortno = 0;
        if (this.state.progresssortno == 0) {
            this.state.progresssortno = 2;
        } else if (this.state.progresssortno == 1) {
            this.state.progresssortno = 2;
        } else if (this.state.progresssortno == 2) {
            this.state.progresssortno = 1;

        }
        this.forceUpdate();
        this.showPlanData();
    }

    handleIssueTimeChange = (e) => {
        this.state.problemFilterCode = e;
        if (!this.state.pkOrg) {
            return
        }
        this.showProblemReason();
    }

    enterProbleItem = (index) => {
        problemreasonChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
        });
        problemreasonChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
            //name?: string,
        })
    }

    leaveProblemItem = (index) => {
        problemreasonChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
        });
        problemreasonChart.dispatchAction({
            type: 'hideTip'
        })
    }

    enterSupplier = (index) => {
        supplierChart.dispatchAction({
            type: 'highlight',
            seriesIndex: [0, 1],
            dataIndex: index
        });
    }

    leaveSupplier = (index) => {
        supplierChart.dispatchAction({
            type: 'downplay',
            seriesIndex: [0, 1],
            dataIndex: index
        });
    }

    plantablerowClick = (record, index, event) => {
        sessionStorage.setItem('bPkProject', record.pkProject);
        sessionStorage.setItem('bProjectName', record.sname);
        window.location.href = `/workgantt.html?page_state=1`
    }
    getProblemReasonData = (problemName, self) => {
        let problemNameArr = [];
        if (problemName === '其他') {
            let problemreasondata = self.state.problemreasondata;
            for (let i = 0; i < problemreasondata.length; i++) {
                let item = problemreasondata[i];
                if (item.problemName !== '其他') {
                    problemNameArr.push(item.problemName)
                }
            }
        } else {
            problemNameArr.push(problemName)
        }
        let range = self.state.problemFilterCode;
        let params = {
            tenantId,
            range,
            orgId: this.state.pkOrg,
            problemName: problemNameArr
        };
        sessionStorage.setItem('statisticsparams', JSON.stringify(params));
        window.location.href = `/queryreport.html`
    }
    problemreasonClick = (itemData) => {
        let problemName = itemData.problemName;
        this.getProblemReasonData(problemName, this)
    };
    getEnterpriseName = (arr, index) => {
        let arrIndex = index - 1;
        let enterpriseName = arr[arrIndex]['enterpriseName']
        let pkEnterprise = arr[arrIndex]['pkEnterprise']
        return { enterpriseName, pkEnterprise }
    };
    getSupplierData = (enterpriseName, pkEnterprise, overdue) => {
        let params = {
            tenantId,
            enterpriseName,
            overdue,
            statistics: true,
            pkEnterprise,
            orgId: this.state.pkOrg,
        };
        sessionStorage.setItem('statisticsparams', JSON.stringify(params));
        window.location.href = `/queryreport.html`
    }
    supplierClick = (itemData) => {
        let getEnterpriseName = itemData.enterpriseName;
        let pkEnterprise = itemData.pkEnterprise;
        this.getSupplierData(getEnterpriseName, pkEnterprise, '2')
    }


    //reqortstart js
    getAutoStartTime = (newTime) => {
        let startTime = newTime - 29 * 24 * 60 * 60 * 1000;
        startTime = fmtDate(startTime);
        return startTime
    };
    handleAutoTimeValue = (callBackArr) => {
        let newTime = new Date().getTime();
        let endTime = fmtDate(newTime);
        let startTime = this.getAutoStartTime(newTime);
        this.setState({
            startTime,
            endTime
        }, () => {
            let { selectValue } = this.state;
            if (callBackArr && callBackArr.length) {
                if (selectValue) {
                    callBackArr.forEach((item) => {
                        if (typeof item == "function") {
                            item()
                        }
                    })
                } else {
                    danger({ 'text': "你没有组织权限,不能查看企业看板" })
                }
            } else {
                if (selectValue) {
                    this.handleSureTimeValue()
                } else {
                    danger({ 'text': "你没有组织权限,不能查看企业看板" })
                }
            }
        })
    };
    handleSureTimeValue = () => {
        this.setState({
            formValue: ''
        });
        this.handleGetOrgRoleList();
        this.handleGetProjectActivityData()
    };
    init = () => {
    };
    onTimeChange = (timeArr) => {
        let startTime = fmtDate(timeArr[0]);
        let endTime = fmtDate(timeArr[1]);
        this.setState({
            startTime,
            endTime
        }, () => {
            let { selectValue } = this.state;
            if (selectValue) {
                this.handleSureTimeValue()
            } else {
                danger({ 'text': "你没有组织权限,不能查看企业看板" })
            }
        })
    };
    onSelectChange = (value) => {
        this.setState({
            selectValue: value,
            pkOrg: value,
        }, () => {
            this.handleSureTimeValue();
            this.showProblemReason();
            this.showPlanData();
            this.showSupplierProblem()
        })
    };
    onInitDataAnalysis = () => {
        let fromGroupData = JSON.parse(sessionStorage.getItem('fromGroupData'));
        if (fromGroupData) {
            let urlParamArr = Object.keys(fromGroupData);
            let startPage = vendorsGetUrlParam(decodeURI(window.location.href));
            startPage = Object.keys(startPage);
            if (urlParamArr && urlParamArr.length && startPage && startPage.length) {
                this.setFromGroupQueryData({ fromGroupData, urlParamArr });
            } else {
                this.handleGetPkOrgList(this.getInitData);
            }
        } else {
            this.handleGetPkOrgList(this.getInitData);
        }
    };
    handleGetAllbillTypeTotal = (params) => {
        getAllbillTypeTotal(params).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                data = data.result;
                if (data && data.length) {
                    this.setState({
                        initEcharsData: 1
                    }, () => {
                        this.initEchars(data)
                    })
                } else {
                    this.setState({
                        initEcharsData: 0
                    }, () => {
                        this.initEchars([])
                    })
                }
            } else {
                danger({ 'text': data.exMsg })
            }
        })
    };
    setInitEcharsData = () => {
        let echarsData = [
            { billType: 'PXJY', billCount: 0, picCount: 0 }, //平行检验
            { billType: 'PZJL', billCount: 0, picCount: 0 }, //旁站记录
            { billType: 'XCJL', billCount: 0, picCount: 0 }, //巡查记录
            { billType: 'SGJL', billCount: 0, picCount: 0 }, //施工记录
            { billType: 'GXBY', billCount: 0, picCount: 0 }, //工序报验
            { billType: 'WTJL', billCount: 0, picCount: 0 }, //问题记录
            { billType: 'GXPZ', billCount: 0, picCount: 0 }, //工序拍照
            { billType: 'SGRZ', billCount: 0, picCount: 0 }, //施工日志
            { billType: 'ZHYS', billCount: 0, picCount: 0 }, //综合验收
            { billType: 'BGSQ', billCount: 0, picCount: 0 }, //签证申请
            { billType: 'BGQZ', billCount: 0, picCount: 0 }, //变更签证
            { billType: 'GZLX', billCount: 0, picCount: 0 }, //工作联系
            { billType: 'KGBG', billCount: 0, picCount: 0 }, //开工报告
            { billType: 'AQZG', billCount: 0, picCount: 0 }, //安全整改
            { billType: 'TGBG', billCount: 0, picCount: 0 }, //停工单
            { billType: 'FGD', billCount: 0, picCount: 0 },  //复工单
            { billType: 'JDYS', billCount: 0, picCount: 0 }, //阶段验收
        ];
        return echarsData
    };
    initEchars = (rec) => {
        let { option, projectName, projectManagerName } = this.state;
        let echarsData = this.setInitEcharsData();
        //  rec=[
        //     {billType:'PXJY',billCount:1,picCount:1},
        //     {billType:'PZJL',billCount:1,picCount:1},
        //     {billType:'XCJL',billCount:2,picCount:12},
        //     {billType:'SGJL',billCount:4,picCount:5},
        //     {billType:'GXBY',billCount:50,picCount:48},
        //     {billType:'WTJL',billCount:18,picCount:48},
        //     {billType:'GXPZ',billCount:7,picCount:3},
        //     {billType:'SGRZ',billCount:3,picCount:5},
        //     {billType:'ZHYS',billCount:8,picCount:9},
        //     {billType:'QZSQ',billCount:14,picCount:15},
        //     {billType:'BGQZ',billCount:11,picCount:16},
        //     {billType:'JHSP',billCount:11,picCount:5},
        //     {billType:'GZLX',billCount:2,picCount:6},
        // ]
        rec.forEach((recItem, recIndex) => {
            echarsData.forEach((item, index) => {
                if (recItem.billType == item.billType) {
                    echarsData.splice(index, 1, recItem)
                }
            })
        });
        let billCountArr = [];
        let picCountArr = [];
        let { series, title, yAxis } = option;
        echarsData.forEach((item, index) => {
            billCountArr.push(item.billCount);
            picCountArr.push(item.picCount);
        });
        let allDataArr = billCountArr.concat(picCountArr);
        allDataArr.sort((a, b) => {
            return b - a
        });
        series = [{ ...series[0], data: billCountArr }, { ...series[1], data: picCountArr }];
        yAxis.max = allDataArr[0];
        title.text = '项目名称: ' + projectName;
        title.subtext = '项目经理: ' + projectManagerName;
        let options = { ...this.state.option, yAxis, series, title };
        this.setState({
            option: options
        }, () => {
            let lineChart = echarts.init(document.getElementById('line--echarts'));
            lineChart.setOption(this.state.option);
            lineChart.on('click', (params) => {
                let { startTime, endTime, pkOrg, selectValue, activeProjectId, activeProjectName, orgList } = this.state;
                let  start_time = Date.parse(startTime);
                let end_time = Date.parse(endTime);
                params = {
                    start_time: start_time,
                    end_time: end_time,
                    pk_org: pkOrg,
                    orgName: orgList.filter((item) => selectValue === item.pkSrc)[0].sname,
                    billType: params.name,
                    pkProject: activeProjectId,
                    projectName: activeProjectName,
                    showBreadcrumb: this.state.showBreadcrumb
                };
                if (this.state.showBreadcrumb == 2) {
                    params = { ...params, orgList: this.state.orgList }
                }
                sessionStorage.setItem('fromGroupData', JSON.stringify(params));
                if (params.billType === "停工单") {
                    window.location.href = '/stopworklist.html';
                } else if (params.billType === "复工单") {
                    window.location.href = '/resumeworklist.html';
                } else if (params.billType === "开工报告") {
                    vendorsSetStorage('kgbgproject', { value: activeProjectId, display: activeProjectName });
                    vendorsSetStorage('kgbgdaterange', { startTime, endTime });
                    window.location.href = '/workstartreport.html#/list';
                } else if (params.billType === "工作联系") {
                    vendorsSetStorage('gzlxproject', { value: activeProjectId, display: activeProjectName });
                    vendorsSetStorage('gzlxdaterange', { startTime, endTime });
                    window.location.href = '/workconnect.html#/list';
                } else {
                    window.location.href = '/billsInquiry.html?page_state=1';
                }
            })
        });
    };
    onRowEcharsClick = (rec) => {
        let { startTime, endTime } = this.state;
        startTime = Date.parse(startTime);
        endTime = Date.parse(endTime);
        let params = {
            projectId: rec.pkProject,
            timeStart: startTime,
            timeEnd: endTime,
            tenantId
        };
        this.setState({
            projectName: rec.projectName || '',
            projectManagerName: rec.projectManagerName || '',
            activeProjectId: rec.pkProject,
            activeProjectName: rec.projectName
        }, () => {
            this.handleGetAllbillTypeTotal(params)
        });
    };
    handleFormChange = (e) => {
        this.setState({
            formValue: e.target.value
        }, () => {
        })
    };
    searchActiveProjectData = () => {
        let { startTime, endTime, pkOrg, formValue } = this.state;
        startTime = Date.parse(startTime);
        endTime = Date.parse(endTime);
        let param = {
            orgId: pkOrg,
            timeStart: startTime,
            timeEnd: endTime,
            tenantId,
            limit: 1000,
            keyword: formValue,
            start: 0
        };
        getSearchProjectActivityData(param).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                let { objects } = data.result;
                objects = objects && objects.length ? objects : [];
                if (objects && objects.length) {
                    this.onRowEcharsClick(objects[0]);
                } else {
                    objects = []
                }
                this.setState({
                    projectsData: objects,
                })
            } else {
                danger({ 'text': data.exMsg })
            }
        })
    };
    setRowKey = (record, index) => {
        return index
    };
    toGroupQuery = () => {
        return "/groupquery.html"
    };

    getProjectName = (text) => {
        let displayText = text.length > textOverflowIndex ? text.substr(0, textOverflowIndex) + "..." : text;
        return (<Tooltip
            className={[text.length > textOverflowIndex ? "show" : "hidden"]}
            inverse
            placement="top"
            overlay={text}>
            <div className="echart-project-name">项目名称: {displayText}</div>
        </Tooltip>)
    }

render() {
    let columns = [
        {
            dataIndex: "scode", key: "a", width: '15%',
            title: <div onClick={this.sortByCode}>
                <span style={{ position: 'relative', cursor: 'pointer' }}>
                    编码
                    <Icon className={this.state.codesortno == 1 ? 'hsortcodeup hsort' : 'hsortcodeup'}
                        type='uf-triangle-up'></Icon>
                    <Icon className={this.state.codesortno == 2 ? 'hsortcodedown hsort' : 'hsortcodedown'}
                        type='uf-triangle-down'></Icon>
                </span>
            </div>,
            render(text, record, index) {
                if (record.iskey) {
                    return (<div style={{ position: 'relative' }}>{text}<Icon className='hprojectstar'
                        type='uf-star'></Icon></div>)
                } else {
                    return text;
                }
            }
        },
        {
            title: "项目名称", dataIndex: "sname", key: "b",
            render(text, rec, index) {
                let displayText = text.length > textOverflowIndex ? text.substr(0, textOverflowIndex) + "..." : text;
                return (
                    <Tooltip
                        className={[text.length > textOverflowIndex ? "show" : "hidden"]}
                        inverse
                        placement="top"
                        overlay={text}>
                        <div>{displayText}</div>
                    </Tooltip>
                )
            }
        },
        { title: "项目经理", dataIndex: "managerName", key: "c", width: '10%' },
        { title: "计划开始时间", dataIndex: "planStartDate", key: "d", width: '10%' },
        { title: "计划完成时间", dataIndex: "planEndDate", key: "e", width: '10%' },
        {
            dataIndex: "progress", key: "f", width: '10%',
            title: <div onClick={this.sortByProgress}>
                <span style={{ position: 'relative', cursor: 'pointer' }}>
                    实际进度
                    <Icon className={this.state.progresssortno == 1 ? 'hsortcodeup hsort' : 'hsortcodeup'}
                        type='uf-triangle-up'></Icon>
                    <Icon className={this.state.progresssortno == 2 ? 'hsortcodedown hsort' : 'hsortcodedown'}
                        type='uf-triangle-down'></Icon>
                </span>
            </div>,
        },
        { title: "按时达成率", dataIndex: "onTimeCompletionRate", key: "g", width: '14%' },
    ];

    let problemreasonlist = this.state.problemreasondata.map((cur, index, arr) => {
        return (
            <li className='hsupplierli' onClick={() => {
                this.problemreasonClick(cur)
            }}>
                <div onMouseEnter={this.enterProbleItem.bind(null, index)}
                    onMouseLeave={this.leaveProblemItem.bind(null, index)} style={{ marginRight: '30px' }}>
                    <div className='hsupplierleft' style={{ backgroundColor: color[index % color.length] }}></div>
                    <div className='hsupplierright hfixedmax'>{cur.name}</div>
                    <div className='hsupplierright hpercent'>{cur.percent}</div>
                </div>
            </li>
        )
    });

    let supplierlist = this.state.supplierdata.map((cur, index, arr) => {
        return (
            <li className='hsupplierli' onMouseEnter={this.enterSupplier.bind(null, index)}
                onMouseLeave={this.leaveSupplier.bind(null, index)} onClick={() => {
                    this.supplierClick(cur)
                }}>
                {/* <div className='hsupplierleft' style={{ backgroundColor: '#c23531' }}></div> */}
                <div className='hsupplierright' style={{ width: 20, }}>{'0' + (index + 1)}</div>
                <div className='hsupplierright hsuppliername' title={cur.enterpriseName}>{cur.enterpriseName}</div>
                <div className='hsupplierright'
                    style={{ width: 120, textAlign: 'right' }}>{cur.overdueCount + ' / ' + cur.totalCount}</div>
            </li>
        );
    });

    let { constructBillTotal, supervisorBillTotal, ownEntBillTotal, formValue, selectDisabled, showBreadcrumb, showBreadFlag, startTime, endTime, dataSource, selectValue, orgList, billCount, picCount, projectsData, projectColumns, constructData, supervisorCountData, ownEntCountData, columnsTable } = this.state;
    return (
        <App>
            <div>
                <div className="proble--record">
                    <div className="drop-search">
                        {showBreadFlag && showBreadcrumb == 3 ?
                            <div className="brc-nav">
                                <Breadcrumb>
                                    <Breadcrumb.Item href={this.toGroupQuery()}>
                                        集团查看
                                        </Breadcrumb.Item>
                                    <Breadcrumb.Item active>
                                        企业看板
                                        </Breadcrumb.Item>
                                </Breadcrumb>
                            </div> : null}
                        <div className="drop-search-container">
                            <Select
                                showSearch
                                size="lg"
                                disabled={selectDisabled}
                                placeholder={'请选择'}
                                value={selectValue}
                                onChange={this.onSelectChange}
                                optionFilterProp="children"
                                notFoundContent="没有相关条目"
                            >
                                {
                                    orgList.map((item) => {
                                        return <Option value={item.pkSrc} key={item.pkSrc}>{item.sname}</Option>
                                    })
                                }
                            </Select>
                        </div>

                    </div>
                    <div className="proble-header clearfix">
                        <div className="ph-title-container clearfix">
                            <h3 className="ph-title">活跃度</h3>
                            <div className="ph-bill-container">
                                <span className="photoIcon billIcon clearfix"></span>
                                <div>单据总数</div>
                                <div className="ph-num">{billCount}</div>
                                <div>张</div>
                            </div>
                            <div className="ph-line"></div>
                            <div className="ph-bill-container clearfix">
                                <span className="photoIcon"></span>
                                <div>图片总数</div>
                                <div className="ph-num">{picCount}</div>
                                <div>张</div>
                            </div>
                        </div>
                        <div className='group-header__choosetime clearfix'>
                            <div className="ghc-start-time">
                                <RangePicker
                                    startTime={startTime}
                                    endTime={endTime}
                                    onChange={this.onTimeChange}
                                />
                            </div>
                            <Button className="ghc-btn" colors="primary"
                                onClick={this.handleAutoTimeValue}>近30天</Button>
                        </div>
                    </div>
                    <Row className="normal--space">
                        <Col md={5} xs={5} sm={5} className="search--content">
                            <div className="col-container">
                                <div className="clearfix search--header">
                                    <FormControl
                                        value={formValue}
                                        size="lg"
                                        onChange={this.handleFormChange}
                                        placeholder={'请输入项目名称，项目编码'}
                                        className="search--input"
                                    />
                                    <Button className="search--btn"
                                        onClick={this.searchActiveProjectData}>搜索</Button>
                                </div>
                                <Table
                                    rowKey={this.setRowKey}
                                    onRowClick={this.onRowEcharsClick}
                                    scroll={{ y: 384 }}
                                    emptyText={() => '暂无数据'}
                                    columns={projectColumns}
                                    data={projectsData} />
                            </div>

                        </Col>
                        <Col md={7} xs={7} sm={7}>
                            <div className="echarts-container" id="echarts-container">
                                <div className="echart-title-name">
                                    {this.getProjectName(this.state.projectName)}
                                    <div className="echart-project-manager">项目经理: {this.state.projectManagerName}</div>
                                </div>
                                <div id="line--echarts" className="line--echarts"></div>
                                {/*<div style={{width:'100%',height:'100%',textAlign:'center',lineHeight:'494px',color:'#666'}}>暂无数据</div>*/}
                            </div>
                        </Col>
                    </Row>
                    <Row className="nromal--space table--list">
                        <Col md={4} xs={4} sm={4} className="table--item">
                            <div className="clearfix item--header">
                                <i className="item--icon"></i>
                                <span className="item--name">施工方</span>
                                <div style={{ float: 'right' }}>
                                    <span>合计:&nbsp;</span>
                                    <span>{`${constructBillTotal}张`}</span>
                                </div>
                            </div>
                            <Table
                                className="sg"
                                scroll={{ y: 300 }}
                                columns={columnsTable}
                                rowKey={this.setRowKey}
                                emptyText={() => '暂无数据'}
                                data={constructData} />
                        </Col>
                        <Col md={4} xs={4} sm={4} className="table--item">
                            <div className="clearfix item--header">
                                <i className="item--icon"></i>
                                <span className="item--name">监理</span>
                                <div style={{ float: 'right' }}>
                                    <span>合计:&nbsp;</span>
                                    <span>{`${supervisorBillTotal}张`}</span>
                                </div>
                            </div>
                            <Table
                                className="jl"
                                scroll={{ y: 300 }}
                                rowKey={this.setRowKey}
                                emptyText={() => '暂无数据'}
                                columns={columnsTable}
                                data={supervisorCountData} />
                        </Col>
                        <Col md={4} xs={4} sm={4} className="table--item">
                            <div className="clearfix item--header">
                                <i className="item--icon"></i>
                                <span className="item--name">甲方</span>
                                <div style={{ float: 'right' }}>
                                    <span>合计:&nbsp;</span>
                                    <span>{`${ownEntBillTotal}张`}</span>
                                </div>
                            </div>
                            <Table
                                className="jf"
                                rowKey={this.setRowKey}
                                scroll={{ y: 300 }}
                                emptyText={() => '暂无数据'}
                                columns={columnsTable}
                                data={ownEntCountData} />
                        </Col>
                    </Row>
                </div>
                <div style={{ backgroundColor: '#fff' }}>
                    <div className='hhead1'>
                        <div style={{ display: 'inline-block', overflow: 'hidden', paddingTop: '2px' }}>项目计划看板</div>
                        <div style={{ display: 'inline-block', float: 'right' }}>
                            <Radio.RadioGroup
                                className='hradio1'
                                name="fruit"
                                selectedValue={this.state.filterCode}
                                onChange={this.handleRadio1Change}>

                                <Radio.RadioButton value="ongoing">进行中</Radio.RadioButton>

                                <Radio.RadioButton value="completed">已完成</Radio.RadioButton>

                                <Radio.RadioButton value="all">全部</Radio.RadioButton>

                            </Radio.RadioGroup>

                        </div>
                    </div>
                    <Table className='plantable'
                        columns={columns}
                        data={this.state.plandata}
                        emptyText={() => '暂无数据'}
                        scroll={{ y: 389 }}
                        onRowClick={this.plantablerowClick}
                    />
                    <div style={{ backgroundColor: '#eee', height: 10, margin: '0 -10px' }}></div>
                    <div
                        className="workreport-title"
                        style={{
                            height: 50,
                            lineHeight: '50px',
                            fontSize: '15px',
                            fontFamily: 'MicrosoftYaHei',
                            color: '#5D5D5D'
                        }}>质量统计分析
                        </div>
                    <div style={{ height: 340, marginTop: '15px' }}>
                        <div className='hhorpanel'>
                            <div style={{
                                height: 30,
                                lineHeight: '30px',
                                fontFamily: 'MicrosoftYaHei',
                                fontSize: '13px',
                                color: '#5D5D5D'
                            }}>
                                <div className='hhead2'>问题多发分析</div>
                                时间筛选：
                                    <Select
                                    showSearch={false} size="sm"
                                    style={{ width: 100, marginRight: 50 }}
                                    placeholder=""
                                    defaultValue={this.state.problemFilterCode}
                                    onChange={this.handleIssueTimeChange.bind(this)}
                                >
                                    <Option value="aYear">近一年</Option>
                                    <Option value="halfYear">近半年</Option>
                                    <Option value="threeMonth">近三个月</Option>
                                </Select>
                            </div>
                            <div className='hzwsj'
                                style={{ visibility: (this.state.problemnodata ? 'visible' : 'hidden') }}>
                                暂无数据
                                </div>
                            <div style={{ visibility: (!this.state.problemnodata ? 'visible' : 'hidden') }}>
                                <div id="issueAnalysis" style={{ width: 350, height: 340, float: 'left' }}></div>
                                <div style={{
                                    overflow: 'hidden',
                                    margin: '20px 30px 0 0',
                                    fontFamily: 'MicrosoftYaHei',
                                    fontSize: '15px',
                                    color: '#5D5D5D'
                                }}>
                                    问题总数：<span>{this.state.issuesNoAll}</span>
                                    <ul className='hsupplierlist'>
                                        {problemreasonlist}
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div className='hspliterdiv'></div>
                        <div className='hhorpanel'>
                            <div className='hhead3'>
                                <div style={{ display: 'inline-block' }}>未关闭问题统计</div>
                            </div>
                            <div className='hzwsj'
                                style={{ visibility: (this.state.suppliernodata ? 'visible' : 'hidden') }}>
                                暂无数据
                                </div>
                            <div>
                                <div id="suppliernos"
                                    style={{ width: 260, height: 340, float: 'left', marginLeft: '40px' }}></div>
                                <div style={{ marginTop: -10, overflow: 'hidden', marginRight: '30px' }}>
                                    {/* <div style={{ height: 40, overflow: 'hidden' }}>
                                <div className='hsupplierleft' style={{ backgroundColor: '#2997DB' }}></div>
                                未超期
                            <div className='hsupplierleft' style={{ backgroundColor: '#FF667F', marginLeft: 30 }}></div>
                                超期
                            </div> */}
                                    <div style={{
                                        height: 40,
                                        lineHeight: '40px',
                                        fontFamily: 'MicrosoftYaHei',
                                        color: '#5D5D5D'
                                    }}>
                                        <div className='hqymc'>
                                            施工单位
                                            </div>
                                        <div className='hsupplierno'>
                                            超期/总数
                                            </div>
                                    </div>
                                    <div
                                        style={{ margin: '0 0 14px 0', height: 1, backgroundColor: '#D9D9D9' }}></div>
                                    <div id='suppliertable'
                                        style={{
                                            overflow: 'hidden',
                                            height: 200,
                                            borderBottom: '1px solid #d9d9d9'
                                        }}>
                                        <ul className=''>
                                            {supplierlist}
                                        </ul>
                                    </div>
                                    <div style={{ marginTop: '3px' }}>
                                        <div className='hhjname'>合计</div>
                                        <div className='hhjsj' style={{
                                            width: 120,
                                            textAlign: 'right'
                                        }}>{this.state.supplieroverduenumbers + ' / ' + this.state.supplierproblemnumbers}</div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>


        </App>
    );
}
}
